<template>
  <div class="release">
    <div class="center-content">
      <el-form label-position="left" label-width="80px" :model="askform">
        <el-form-item label="文章标题">
          <el-input v-model="questionform.title" show-word-limit maxlength="40" size="small"></el-input>
        </el-form-item>
        <el-form-item label="选择板块">
          <el-select size="small" v-model="questionform.cateId" placeholder="请选择板块">
            <el-option v-for="item in questionCatelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择标签">
          <el-select v-model="questionform.labelList" size="small" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
            <el-option v-for="item in questionLabellist" :key="item.value" :label="'# ' + item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <v-md-editor v-model="questionform.content" height="500px"></v-md-editor>
        </div>
        <div style="text-align: right; margin: 30px 0">
          <el-button size="small" @click="$router.go(-1)">取消</el-button>
          <el-button type="primary" size="small" @click="addQuestion">发表问答</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addQuestion } from "@/api/u/question";
import { mapState } from "vuex";
export default {
  data() {
    return {
      questionform: {
        cateId: "",
        content: "",
        title: "",
        labelList: [],
      },
      questionCatelist: [
        {label: "学习问答", value: 1},
        {label: "日常话题", value: 2},
        {label: "知识交流", value: 3}
      ],
      questionLabellist: [
        {label: "历史", value: 1},
        {label: "文学", value: 2},
        {label: "专业技能", value: 3},
        {label: "书籍推荐", value: 4},
        {label: "自律", value: 5},
        {label: "客户端指令", value: 6}
      ],
    };
  },
  created() {
    this.getAclCateList();
    this.getAclTagList();

    if (this.$route.query && this.$route.query.id) {
      this.getAclInfo(this.$route.query.id);
    }
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user }),
  },
  methods: {
    // 保存问答
    addQuestion() {
      if (!this.userInfo.token) {
        return this.$message.error("请先登录后再操作！");
      }
      let param = {
        cateId: this.questionform.cateId,
        label: this.questionform.labelList.join(","),
        title: this.questionform.title,
        content: this.questionform.content
      }
      addQuestion(param).then((res) => {
        if (res.code === 200) {
          this.$message.success("发布成功");
          this.$router.push("/questionCenter");
        }
      });
    },



    getAclInfo(aclId) {
      console.log(aclId)
      // eduApi.getAclById(aclId).then((res) => {
      //   if (res.code == 20000) {
      //     Object.keys(this.askform).forEach((key) => {
      //       this.askform[key] = res.data.item[key];
      //     });
      //     this.askform.tagList = res.data.item.tagList.map((e) => e.name);
      //     console.log(this.askform);
      //   }
      // });
    },
    showInput() {
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    getAclCateList() {
      // eduApi.getAclCateList().then((res) => {
      //   if (res.code == 20000) {
      //     this.forumTablist = res.data.list;
      //   }
      // });
    },
    getAclTagList() {
      // eduApi.getAclTagList().then((res) => {
      //   if (res.code == 20000) {
      //     this.forumTaglist = res.data.list;
      //   }
      // });
    },

  },
};
</script>

<style lang="scss" scoped>
.release {
  min-height: 800px;
  padding-top: 20px;
  background-color: #f7f7f7;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.el-tag + .button-new-tag {
  margin-left: 10px;
}
.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}
</style>
